<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>修改密码</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/modules/layer/default/layer.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/style.css">

</head>
<body>
<div class="login-main">

    <!-- 表单选项 -->
    <div style="padding: 15px;">

        <form class="layui-form" action="${APP_PATH}/alterpwd.action" method="post">

            <div class="layui-input-inline">
                <div class="layui-inline" style="width: 85%">
                    <input type="password" id="user" required lay-verify="required" placeholder="原密码" autocomplete="off"
                           class="layui-input">
                </div>
                <div class="layui-inline">
                    <i class="layui-icon" id="ri" style="color: green;font-weight: bolder;" hidden></i>
                </div>
                <div class="layui-inline">
                    <i class="layui-icon" id="wr" style="color: red; font-weight: bolder;" hidden>ဆ</i>
                </div>
            </div>
            <!-- 密码 -->
            <div class="layui-input-inline">
                <div class="layui-inline" style="width: 85%">
                    <input type="hidden" name="state" value="${state}">
                    <input type="password" id="pwd" name="password" required lay-verify="required" placeholder="新密码"
                           autocomplete="off" class="layui-input">
                </div>
                <!-- 对号 -->
                <div class="layui-inline">
                    <i class="layui-icon" id="pri" style="color: green;font-weight: bolder;" hidden></i>
                </div>
                <!-- 错号 -->
                <div class="layui-inline">
                    <i class="layui-icon" id="pwr" style="color: red; font-weight: bolder;" hidden>ဆ</i>
                </div>
            </div>
            <!-- 确认密码 -->
            <div class="layui-input-inline">
                <div class="layui-inline" style="width: 85%">
                    <input type="password" id="rpwd" required lay-verify="required" placeholder="重复新密码"
                           autocomplete="off" class="layui-input">
                </div>
                <!-- 对号 -->
                <div class="layui-inline">
                    <i class="layui-icon" id="rpri" style="color: green;font-weight: bolder;" hidden></i>
                </div>
                <!-- 错号 -->
                <div class="layui-inline">
                    <i class="layui-icon" id="rpwr" style="color: red; font-weight: bolder;" hidden>ဆ</i>
                </div>
            </div>
            <div class="layui-input-inline login-btn" style="width: 85%">
                <button type="submit" lay-submit lay-filter="sub" class="layui-btn">点击修改</button>
            </div>
        </form>
    </div>
</div>
</body>

<script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['layer', 'jquery', 'form', 'laydate'], function () {
        let layer = layui.layer;
        let $ = layui.jquery;
        let form = layui.form;
        let laydate = layui.laydate;

        laydate.render({
            elem: '#test1'
        })


        // 初始密码验证
        $('#user').blur(function () {
            let password = $(this).val();
            $.ajax({
                url: '${pageContext.request.contextPath}/checkPwd',
                data: {password: password, state: ${state}},
                dataType: 'json',
                method: 'POST',
                success: function (res) {
                    if (res.success) {
                        $('#ri').removeAttr('hidden');
                        $('#wr').attr('hidden', 'hidden');
                    } else {
                        $('#wr').removeAttr('hidden');
                        $('#ri').attr('hidden', 'hidden');
                        layer.msg(res.message);
                    }
                }
            })
        })


        // 确认提交修改密码
        form.on('submit(sub)', function (data) {
            $.ajax({
                url: '${pageContext.request.contextPath}/editPwd',
                data: data.field,
                dataType: 'json',
                method: 'POST',
                success: function (res) {
                    if (res.status === '0') {
                        layer.alert(res.message, function () {
                            parent.layer.closeAll();
                            window.parent.location.href = '${pageContext.request.contextPath}/logout';
                        });
                    } else {
                        layer.msg(res.message);
                    }
                }
            })
            // 阻止表单action提交
            return false;
        })

        // 对密码和确认密码验证
        // 输入密码验证
        $('#pwd').blur(function () {
            let reg = /^[\w]{1,12}$/;
            let pwd = $(this).val();
            if (pwd !== null && pwd.match(reg)) {
                $('#pwr').attr('hidden', 'hidden');
                $('#pri').removeAttr('hidden')
            } else {
                $('#pri').attr('hidden', 'hidden');
                $('#pwr').removeAttr('hidden')
            }
        })
        // 确认密码验证
        $('#rpwd').blur(function () {
            let pwd = $('#pwd').val();
            let rpwd = $(this).val();
            // 两次输入密码验证
            if (pwd === rpwd) {
                $('#rpri').removeAttr('hidden')
                $('#rpwr').attr('hidden', 'hidden');
            } else {
                $('#rpri').attr('hidden', 'hidden');
                $('#rpwr').removeAttr('hidden')
            }
        })


    })

</script>
</html>

